<template>
  <div class="text">
    <input type="text" placeholder="输入关键字" />
    <button class="btn2">搜索</button>
    <button class="btn" @click="add">新增</button>
    <el-table :data="tableData" style="width: 60%">
      <el-table-column prop="data" label="序号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="caozuo" label="操作">
        <template #default>
          <el-button size="small" @click="handleClick">编辑</el-button>
          <el-button type="warning" size="small" @click="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";


const tableData = [
  {
    data: "1",
    name: "丁刚",
    age: "22",
    address: "广东省珠海市斗门区",
  },
  {
    data: "2",
    name: "万超",
    age: "18",
    address: "西藏自治区 阿里山区 札达县",
  },
  {
    data: "3",
    name: "贺涛",
    age: "28",
    address: "澳门特别行政区 澳门半岛",
  },
  {
    data: "4",
    name: "韩强",
    age: "15",
    address: "辽宁省 丹东市 其他区",
  },
  {
    data: "5",
    name: "徐静",
    age: "26",
    address: "山东省青岛市李沧区",
  },
];
var handleClick = () => {

};
var del = () => {

};
var add = () => {

};
</script>

<style scoped>
.text {
  margin-bottom: 20px;
}
.text input {
  padding: 10px;
  border: none;
  border: 1px solid #ccc;
}
.text .btn2 {
  padding: 8px;
  border: none;
  border: 1px solid #ccc;
  margin-left: 10px;
}
.text .btn {
  padding: 8px;
  border: none;
  background-color: rgb(46, 122, 236);
  color: white;
  margin-left: 10px;
}
</style>